<template>
  <div class="form-con">
    <el-form
      :model="formData"
      label-position="left"
      label-width="2rem"
      class="tb-form-inline"
    >
      <el-form-item label="任务名称：">
        <el-input
          v-model="formData.jobName"
          :style="{ width: '5.3rem' }"
          placeholder="请输入"
        ></el-input>
      </el-form-item>

      <el-form-item label="组名：">
        <el-input
          v-model="formData.jobGroup"
          :style="{ width: '5.3rem' }"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="">
        <el-checkbox-group v-model="form.type">
          <el-checkbox
            v-for="(option, index) in checkboxOptions"
            :key="index"
            :label="option.label"
            :name="option.name"
          >
            {{ option.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item> -->
      <el-form-item label="实体类型：">
        <el-autocomplete
          :style="{ width: '5.3rem' }"
          v-model="formData.entityName"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入"
          @select="handleSelect"
        >
        </el-autocomplete>
      </el-form-item>
      <el-form-item label="是否选择唯一性字段">
        <el-switch
          v-model="formData.isSelect"
          active-text="是"
          inactive-text="否"
        ></el-switch>
      </el-form-item>
      <el-form-item v-if="formData.isSelect" label="字段名">
        <el-select
          :style="{ width: '5.3rem' }"
          v-model="formData.fields"
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in fieldOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="执行频率：">
        <div style="display: flex">
          <el-input
            :style="{ width: '2.4rem' }"
            v-model="formData.timeCount"
            type="number"
            placeholder="请输入"
          ></el-input>
          <el-select
            v-model="formData.timeType"
            placeholder="请选择"
            style="margin-left: 0.2rem"
            :style="{ width: '2.7rem' }"
          >
            <el-option label="天" value="day"></el-option>
            <el-option label="月" value="month"></el-option>
            <el-option label="年" value="year"></el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item label="是否单次执行：">
        <el-select
          v-model="formData.isOne"
          placeholder="请选择"
          :style="{ width: '5.3rem' }"
        >
          <el-option label="是" :value="true"></el-option>
          <el-option label="否" :value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务描述：">
        <el-input
          type="textarea"
          :style="{ width: '5.3rem' }"
          v-model="formData.jobDescribe"
          placeholder="请输入"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item>
        <el-button type="info" @click="onSubmit">
          重置
        </el-button>
        <el-button type="primary" @click="onSubmit">
          查询
        </el-button>
      </el-form-item> -->
      <!-- <el-form-item>
        <el-button
          type="primary"
          style="width: 1.4rem; height: 0.48rem"
          icon="el-icon-plus"
          >新增任务</el-button
        >
      </el-form-item> -->
    </el-form>
  </div>
</template>
  
<script>
import { getEntityTypes, getEntityTypeFields } from "@/api/tasklist.js";
export default {
  components: {},
  computed: {},
  data: () => {
    return {
      formData: {
        jobName: "",
        isSelect: false,
        fields: "",
        jobGroup: "默认分组",
        entityName: "",
        entityType: "",
        jobDescribe: "",
        timeCount: "",
        timeType: "",
        isOne: false,
      },
      entityTypeList: [],
      checkboxOptions: [],
      fieldOptions: [],
    };
  },
  watch: {
    "formData.isSelect": function (newVal) {
      if (newVal == true) {
        // 如果选了是,判断实体类型选了吗
        if (this.formData.entityName != "") {
          this.fetchCheckboxOptions();
        } else {
          this.$message({
            message: "请先选择实体类型",
          });
          this.formData.isSelect = false;
        }
      }
    },
    // "formData.entityName": function (newVal) {
    //   if (newVal != "") {
    //     // 如果选了是则调用
    //     this.fetchCheckboxOptions();
    //   } else {
    //     this.$message({
    //       message: "请先选择实体类型",
    //     });
    //     this.formData.isSelect = false;
    //   }
    // },
  },
  mounted() {
    // this.getStType();
    // this.fetchCheckboxOptions();
  },
  methods: {
    // 获取多选列表
    fetchCheckboxOptions() {
      getEntityTypeFields({
        entityType: this.formData.entityType,
        // entityType: "GLDZ_330421_TDCB",
      })
        .then((res) => {
          const outputList = res.map((item) => {
            return {
              value: item.name,
              label: item.name,
              isSelect: item.isSelect,
            };
          });
          this.fieldOptions = outputList;
        })
        .catch((err) => {});
    },
    querySearchAsync(queryString, cb) {
      getEntityTypes({
        chineseName: queryString,
      })
        .then((res) => {
          // 新增一个 value 字段，值为 chineseName
          const modifiedData = res.map((item) => ({
            ...item, // 保留原有字段
            value: item.chineseName, // 新增 value 字段
          }));
          this.entityTypeList = modifiedData;
          cb(modifiedData);
        })
        .catch((err) => {});
    },
    handleSelect(item) {
      if (item.chineseName == "") {
      } else {
        this.formData.entityName = item.chineseName;
        this.formData.entityType = item.name;
        this.fetchCheckboxOptions();
      }
    },
    // 获取实体类型
    // getStType(name) {
    //   getEntityTypes({
    //     chineseName: name,
    //   })
    //     .then((res) => {
    //       this.entityTypeList = res;
    //     })
    //     .catch((err) => {});
    // },
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>
  
  <style lang="less" scoped>
@formheight: 0.36rem;
.form-con {
  display: block;
  .tb-form-inline {
    text-align: left;
    height: @formheight; /* 设置 Form 高度 */
    :deep(.el-input__inner),
    :deep(.el-form-item__label),
    :deep(.el-form-item__content) {
      min-height: @formheight;
      line-height: @formheight;
      font-family: SourceHanSansCN;
      font-weight: 400;
      font-size: 0.18rem;
    }
    :deep(.el-button) {
      width: 1rem;
      height: @formheight;
      line-height: @formheight;
      padding: 0;
    }

    :deep(.el-form-item__label) {
      float: left !important;
    }
    :deep(.el-button--primary) {
      background: linear-gradient(90deg, #3364fe 0%, #5f9afe 100%);
      border-radius: 0.04rem;
      border-color: transparent;
    }
  }
}
</style>
  